<script setup>
  import {ref, nextTick} from "vue"
  const  isVisible = ref(false)
  const inputRef = ref(null)

  // 点击开启编辑
  const edit = () => {
    // 更改隐藏状态
    isVisible.value = !isVisible.value
    // 文本框鼠标聚焦
    // 使用v-show虽然可以获取到DOM，但是无法对其进行操作，可能是因为没有更新
    // inputRef.value.focus()

    // 使用nextTick
    // 可以完美进行操作！好评
    nextTick(() => {
      inputRef.value.focus()
    })
  }
</script>

<template>
  <div class="top">
    <h3>大标签</h3>
    <button @click="edit()">编辑</button>
  </div>
  <div v-show="isVisible">
    <input type="text" ref="inputRef">
    <button>提交</button>
  </div>
</template>

<style scoped>
  .top {
    display: flex;
    align-items: center;
    width: 200px;
    justify-content: space-between;
  }
</style>